<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>我爱古诗词</title>
        <script src="./js/vue.js"></script>
        <style>
            body{
                background-color: aliceblue;

            }
            #app{
                width: 50%;
                margin: 20px auto;
                background-color: #fff;
                border: 5px solid blueviolet;
                border-radius: 1em;
                box-shadow: 3px 3px 3px rgba(0, 0,0, 0.5);
            }
            h3{
                text-align: center;
            }
            .title{
                display: flex;
                justify-content: space-between;
                align-items: center;
                border: 1px solid #ccc;
            }
            .title h4{
            line-height: 2;
            margin: 0;

        </style>
    </head>
    <body>
        <div id="app">
            <h3>我爱的古诗词</h3>
            <div>
                <div>
                    <div class="title">
                <h3>将进酒</h3>
                <span @click='click1()'>{{isOK?'收起':'展开'}}</span>
            </div>
            <div v-show='isOK'>
                <p>人生得意须尽欢，莫使金樽空对月</p>
                <p>天生我材必有用，千金散尽还复来</p>

        </div>
        </div>
        </div>
        </div>

        <script>
            var vm = new Vue({
            el: '#app',
            data() {
                return {
                    isOK: false
                }
            },
            methods: {
                click1() {
                    this.isOK = !this.isOK
                }
            }
        })
        </script>
    </body>



</html>